<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            width: 100px;
            height: 100px;
            background-color: #f00;
            display: inline-block;
            vertical-align: top;
            margin-top: 50px;
        }

        .b {
            width: 300px;
            height: 300px;
            background-color: #ff0;
            display: inline-block;
            vertical-align: top;
        }
    </style>
</head>

<body>
    <!-- 
        1 元素类型
            块级元素
            行内元素
            行内块级元素 img

        2 元素的特征
            块级元素 独占一行 主要作为容器
            行内元素 左右排列 不支持宽高和上下的margin 上下的padding会把背景颜色和边框撑开但不占位置
            行内块级元素 左右排列且支持宽高及margin等属性   可以支持vertical-align

        3 元素之间的相互转化

            display:block / inline / inline-block

            a标签作为超链接   display:block   

        4 居中的实现
            未知宽度的居中   分页   
                ul  text-align:center ; font-size:0;
                li  display:inline-block ; font-size:14px;   不能写浮动

            图片的水平垂直居中
                li  text-align:center ; line-height : 100px ; font-size:0
                img vertical-align:center    max-width / min-width   max-height / min-height

        5 图片铺满的问题
            img   width:100%   不要写高度
            背景图    背景图居中(两边会被裁切)

        6 过渡效果  transition  

        7 阴影   box-shadow 

        8 位移  transform:translate3d(x,y,z)    translate(x,y)    translateX    translateY 

        9 圆角   border-radius :

     -->


    <div class="a"></div>
    <div class="b"></div>

</body>

</html>